<template>
  <div>
    <div class="pos-re height100P">
      <img src="../assets/imgs/appxz_bg.png" class="height100P width100P">
      <div class="popup_wrap" v-if="xzQrCodeDisplay">
        <div class="pos-re">
          <img src="../assets/imgs/popup_bg.png" class="popup_bg">
          <img src="../assets/imgs/app_qrCode.png" class="app_qrCode">
          <div class="icon-close" @click="clickPopup">
            <i class="el-icon-close" style="color: #FFFFFF;font-size: 25px"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { mapState } from 'vuex'

export default {
  name: "Appxz",
  data(){
    return{

    }
  },
  methods: {
    clickPopup(){
      this.$store.commit('SET_XZQRCODEDISPLAY')
    }
  },
  computed: {
    ...mapState({
      xzQrCodeDisplay: state => state.xzQrCodeDisplay
    })
  }
};
</script>

<style scoped lang="scss">

  .popup_wrap{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -230px;
    margin-left: -450px;

    .popup_bg{
      width: 900px;
      height: 460px;
    }

    .app_qrCode{
      height: 200px;
      position: absolute;
      top: 200px;
      left: 255px;
    }

    .icon-close{
      position: absolute;
      z-index: 15;
      top: 5px;
      right: 5px;
    }
  }



</style>
